<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon">
    <title>用户中心</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet"  th:href="@{/css/my-mediate.css}">
    <script type="text/javascript"  th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript"  th:src="@{/js/vue.min.js}"></script>
</head>
<body>
<!--顶部标题-->
<div id="head">
    <a href="user-personal.html" class="return_img float_left"><img src="/image/icon-fanh.png" alt=""></a>
    <p class="head_title">我的调解</p>
</div>
<div id="my_mediate">
    <!--调解状态-->
    <ul id="mediate_state_list">
        <li class="mediate_state state_active">
            <span>正在调解</span>
            <img src="/image/hengx.png" alt="" class="hengx_img"  style="display: block">
        </li>
        <li class="mediate_state">
            <span>历史调解</span>
            <img src="/image/hengx.png" alt="" class="hengx_img" >
        </li>
    </ul>
    <!--事件-->
    <!--正在调解-->
    <ul class="case_list" style="display: block">
        <a href="#">
            <li class="case">
                <div class="case_title">
                    <span class="float_left title">离婚纠纷调解</span><span class="float_right time">2017-12-25</span>
                </div>
                <div class="case_content">
                    正在调解，正在调解，正在调解，正在调解，正在调解，正在调解
                </div>
                <div class="case_other">
                    <div class="fayuan float_left">崇州市人民法院</div>
                    <div class="zhuangtai float_left">正在调解</div>
                </div>
            </li>
        </a>
    </ul>

    <!--历史调解-->
    <ul class="case_list">
        <a href="#">
            <li class="case">
                <div class="case_title">
                    <span class="float_left title">离婚纠纷调解</span><span class="float_right time">2017-12-25</span>
                </div>
                <div class="case_content">
                    正在崇州市等待受理，正在崇州市等待受理，正在崇州市等待受理
                </div>
                <div class="case_other">
                    <div class="fayuan float_left">崇州市人民法院</div>
                    <div class="zhuangtai float_left">调解成功</div>
                    <div class="pingjia float_right">未评价</div>
                </div>
            </li>
        </a>
    </ul>

</div>

<script>
        var mediateState = $(".mediate_state");
        var hengxImg = $('.hengx_img');
        var caseList = $(".case_list");
        /*调解状态tab切换*/
        mediateState.on("click",function () {
            var index=$(this).index();
            $(this).addClass('state_active').siblings().removeClass('state_active');//选中当前样式，并移除其他tab的样式；
            hengxImg.css('display','none');
            hengxImg.eq(index).css('display','block');
            caseList.css('display','none');
            caseList.eq(index).css('display','block');
        });

        $('.pingjia').on('click',function () {
            window.location.href='/html/pingjia'
        })

</script>

</body>
</html>